<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <%@ include file="/WEB-INF/views/include/header.jsp" %>
    <%--多附件上传css--%>
    <link rel="stylesheet" href="<s:url value="/assets/css/main.css"></s:url>"/>
    <style>
        body{
            background: #fff;
        }
        .SelectFiles{
            display: inline-block;
            position: absolute;
            font-size: 14px;
            color: #fff;
            left: 23px;
            top: 5px;
            width: 76px;
            height: 27px;
            background: #6FB3E0;
            text-align: center;
            border-radius: 5px;
            line-height: 25px;
            cursor: pointer;
        }
        button.btn{
            border-radius: 5px;
        }
        #laydate_today{
            display: none !important;
        }
        .select2-container .select2-choice{
            height: 34px;
            line-height: 34px;
            border-radius: 0px  !important;
        }
        .select2-container .select2-choice .select2-arrow b:before{
            left: 4px;
            top: -5px;
        }
        .btn-upload-file{
            display: none;
        }
        #qqqgridTable{
            width: 90%;
            margin: 0 auto;
        }
        .notclick{
            pointer-events: none;
        }
    </style>
</head>
<body class="no-skin">
<%--上传成功模态框--%>
<div class="shade" style="display: none;"></div>
<div class="warning" style="display: none;">
    <p class="title"><em></em><span class="close">X</span></p>
    <p class="cont"></p>
    <div class="la-square-jelly-box la-3x">
        <div></div>
        <div></div>
    </div>
</div>

<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="col-sm-offset-2" style="margin-top: 100px;">
                <form:form commandName="TaskMainFilter" cssClass="form-horizontal" role="form"  onsubmit="return false;">
                    <div class="row">
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right">
                                    任务名称
                                </label>
                                <div class="col-sm-8">
                                    <input type="text"  name="mainName"  placeholder="任务名称"  value="${TaskMainFilter.mainName}"
                                           class="form-control required">
                                </div>
                            </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">
                                任务内容
                            </label>
                            <div class="col-sm-8">
                                <textarea type="text" name="content" placeholder="任务内容"
                                       class="form-control required" style="resize: vertical;min-height: 50px;height: 80px">${TaskMainFilter.content}</textarea>
                            </div>
                        </div>
                    </div>
                   <!-- <div class="row ">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="categoryId">
                                <a style="color: red">*</a>事项类型
                            </label>
                            <div class="col-sm-8">
                                <select type="text" id="categoryId" name="categoryId" placeholder="事项类型" readonly value="${TaskMainFilter.categoryId}"
                                       class="form-control required">
<%--                                    <c:forEach items="${types}" var="type">--%>
<%--                                        <option value="${type.category}">${type.category}</option>--%>
<%--                                    </c:forEach>--%>
                                </select>
                            </div>
                        </div>
                    </div> -->

                    <div class="row ">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" >
                                督查组单位
                            </label>
                            <div class="col-sm-8">
                                <select name="" multiple="true" id="e1" onchange="addHandle(this)">
                                    <option></option>
                                    <c:forEach items="${groups}" var="group">
                                        <option value="${group.sysId}">${group.deptName}</option>
                                    </c:forEach>
                                </select>
                                <input type="hidden" value=""  name="inspectionId">
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <div class="form-group">
                           <label class="col-sm-offset-1 col-sm-1 text-right control-label">督办时限</label>
                           <div class="col-sm-4 ZtimeTypes">
                                 <input type="radio" onchange="Ztimetype(this)" name="timeType2" checked   value="1">单时限
                                 <input type="radio" onchange="Ztimetype(this)" name="timeType2"  value="2">周期性
                                  <input type="radio" onchange="Ztimetype(this)" name="timeType2"  value="3">多时限
                            </div>
                         </div>
                          <div class="ZchoiceTime">
                             <div class='form-group'>
                                 <label class="col-sm-offset-1 col-sm-1 text-right control-label">可选性周期性</label>
                                 <div class="col-sm-3">
                                       <input type="text" class="form-control Zdate_picker transform" name="timeLimit2" readonly>
                                 </div>
                          </div>
                        <div class="form-group">
                            <label class="col-sm-offset-1 col-sm-1 text-right control-label">任务附件</label>
                            <div class="col-sm-8 pos-rel">
                                <div id="uploader"></div>
                                <%--<div>
                                    <div style="display: inline-block">
                                        <input type="file" class="fileBorder" id="fileupload">
                                    </div>
                                    <div style="display: inline-block">
                                        <button class="btn btn-info" onclick="uploadFile(this,'gJFile','gJFileName')">
                                            <span class="glyphicon glyphicon-open"></span>上传附件
                                        </button>
                                    </div>
                                </div>--%>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 100px">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">
                            </label>
                            <div class="col-sm-6">
                                <input type="button" value="关闭" class="btn-sm btn-default pull-right" onclick="javascript: parent.close_current_app();" style="margin-left: 10px"/>
                                <input type="button" value="添加任务" class="btn-sm btn-info pull-right handleAdd" onclick="handleAdd()"/>
                            </div>
                        </div>
                    </div>
                    <%--多附件上传的name和id--%>
                    <input type="text" name="file" value="" hidden>
                    <input type="text" name="fileName" value="" hidden>
                </form:form>
                </div>
            </div>
        </div>
    </div>
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
    <%@ include file="/WEB-INF/views/include/dialog.jsp" %>
    <%@ include file="/WEB-INF/views/include/footer.jsp" %>
    <%@ include file="/WEB-INF/views/include/taglib.jsp" %>
</div>
<%--多选上传--%>
<script src="<s:url value="/assets/js/dist/easyUploader.jq.js"></s:url>"></script>
<%@ include file="/WEB-INF/views/include/footer.jsp" %>


    <script>

        //子任务时限
        function Ztimetype(e){
            var $checked = $(e).val();
            var html = ""
            if ($checked == 1){
                html =
                    "<div class='form-group'>" +
                    "<label class=\"col-sm-offset-1 col-sm-1 text-right control-label\">可选性周期性</label>\n" +
                    "    <div class=\"col-sm-3\">\n" +
                    "        <input type=\"text\" class=\"form-control Zdate_picker transform\" name=\"timeLimit2\" readonly>\n" +
                    "    </div>\n" +
                    " </div>"
            }else if ($checked == 2){
                html =
                    '            <div class="form-group">\n' +
                    '                <label class="col-sm-offset-1 col-sm-1 text-right control-label">可选性周期性</label>\n' +
                    '                <div class="col-sm-3 Zperiods">\n' +
                    '                    <input type="radio" onchange="Zperiod(this)" name="period2" checked value="0">天\n' +
                    '                    <input type="radio" onchange="Zperiod(this)" name="period2"  value="1">周\n' +
                    '                    <input type="radio" onchange="Zperiod(this)" name="period2" value="2">月\n' +
                    '                    <input type="radio" onchange="Zperiod(this)" name="period2" value="3">季度\n' +
                    '                </div>\n' +
                    '                <label  class="col-sm-1 text-right control-label">反馈时限</label>\n' +
                    '                <div class="col-sm-3 ZfeedbackTime">\n' +
                    "                 <input type=\"number\" class=\"form-control\" min='0' name=\"day2\" placeholder=\"请输入天数\">\n"+
                    '               </div>\n' +
                    '            </div>'
            } else if ($checked ==3){
                html = "<div class='form-group'>" +
                    "<label class=\"col-sm-offset-1 col-sm-1 text-right control-label\">任务时限</label>\n" +
                    "    <div class=\"col-sm-3\">\n" +
                    "        <input type=\"text\" placeholder=\"年-月-日\" class=\"form-control Zdate_picker danyan\" readonly>\n" +
                    "    </div>\n" +
                    "    <div class=\"col-sm-1 addTime\">\n" +
                    "        <input type=\"button\" class=\"btn btn-sm btn-success\" onclick='addTimeBtn(this)' value=\"添加时限\">\n" +
                    "        <input type=\"hidden\" name=\"timeLimits2\">\n" +
                    "    </div>\n" +
                    "    </div>"
            }
            $(e).parent().parent().parent().find('.ZchoiceTime').html(html)
        }


        function Zperiod(e){
            var $checked = $(e).val();
            var html = ""
            if ($checked == 0){
                html = "        <input type=\"number\" class=\"form-control\" min='0' name=\"day2\" placeholder=\"请输入天数\">\n"
            }
            else if ($checked == 1){
                html = "      <select name=\"week2\" class=\"form-control\">\n" +
                    "            <option value=\"1\">星期一</option>\n" +
                    "            <option value=\"2\">星期二</option>\n" +
                    "            <option value=\"3\">星期三</option>\n" +
                    "            <option value=\"4\">星期四</option>\n" +
                    "            <option value=\"5\">星期五</option>\n" +
                    "            <option value=\"6\">星期六</option>\n" +
                    "            <option value=\"7\">星期日</option>\n" +
                    "        </select>"
            } else if ($checked == 2){
                html = "<input type=\"text\" id=\"\" value=\"\" readonly lay-verify=\"date\" name=\"month2\" placeholder=\"日\" autocomplete=\"off\" class=\"layui-input dalong form-control\">\n"
            }else if($checked == 3){
                html = "    <input type=\"text\" value=\"\" readonly lay-verify=\"date\" placeholder=\"年-月-日\" name=\"quarter2\" autocomplete=\"off\" class=\"layui-input form-control date_picker\">\n"
            }
            $(e).parent().parent().parent().find(".ZfeedbackTime").html(html);
        }
        function addTimeBtn(e) {
            var html = " <div class=\"form-group \">" +
                "        <label class=\"col-sm-offset-1 col-sm-1 text-right control-label redTips\">任务时限</label>\n" +
                "   <div class=\"col-sm-3\">\n" +
                "       <input type=\"text\" value=\"\" readonly lay-verify=\"date\" placeholder=\"年-月-日\" autocomplete=\"off\" class=\"layui-input form-control date_picker danyan\">\n" +
                "</div>\n" +
                "    <div class=\"col-sm-1 addTime\">\n" +
                "        <input type=\"button\" class=\"btn btn-sm btn-danger removeTimeBtn\"  value=\"删除时限\">\n" +
                "    </div>"
            "</div>"
            $(e).parent().parent().parent().append(html);
        }
    </script>
<script>
    <%--多文件上传--%>
    var fileStr = "";//id字符串拼接
    var fileNameStr = "";//文件名字符串拼接
    var uploader = easyUploader({
        id: "uploader",
        accept: '.jpg,.png,.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx',
        action: '/filesUpload/uploadFiles',
        dataFormat: 'formData',
        maxCount: 10,//允许上传的个数
        maxSize: 2000,//允许上传最大的容量
        multiple: true,
        data: null,
        beforeUpload: function (file, data, args) {
        },
        onChange: function (fileList) {
        },
        onRemove: function (removedFiles, files) {
            console.log('onRemove', removedFiles);
        },
        onSuccess: function (res) {
            console.log('onSuccess', res);
            if (res.data !== undefined && res.data[0] !== undefined) {
                //拼接文件id 和 文件名
                $("input[name='file']").val(fileStr += res.data[0].sysid + ",");
                $("input[name='fileName']").val(fileNameStr += res.data[0].oldName + ",");

            }
        },
        onError: function (err) {
            console.log('onError', err);
        },
    });
</script>
    <script>
        function minDate() {
            var now = new Date();
            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
        }
        $(document).ready(function (){
            $(document).on("click",".date_picker",function () {
                laydate({
                    elem: this,
                    min: minDate(),
                    choose:function (taskTime) {  //单时限  日期换天数
                        //获取到当天日期
                        var date = new Date();
                        var seperator1 = "-";
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var strDate = date.getDate();
                        if (month >= 1 && month <= 9) {
                            month = "0" + month;
                        }
                        if (strDate >= 0 && strDate <= 9) {
                            strDate = "0" + strDate;
                        }
                        var currentdate = year + seperator1 + month + seperator1 + strDate;
                        // console.log(currentdate);
                        // console.log55555

                        //获取任务时限的val值 计算出任务与时限相差几天
                        var disparity = ((new Date(taskTime)/1000) - (new Date(currentdate)/1000))/(60*60*24);
                        $("#date_picker_jy").val(disparity);
                    }
                });
            });
            $(document).on("click",".Zdate_picker",function () {
                laydate({
                    elem: this,
                    min: minDate(),
                });
            });
            $(document).on("click",".DBdate_picker",function () {
                laydate({
                    elem: this,
                    min: minDate(),
                    choose:function (taskTime) {  //单时限  日期换天数
                        //获取到当天日期
                        var date = new Date();
                        var seperator1 = "-";
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var strDate = date.getDate();
                        if (month >= 1 && month <= 9) {
                            month = "0" + month;
                        }
                        if (strDate >= 0 && strDate <= 9) {
                            strDate = "0" + strDate;
                        }
                        var currentdate = year + seperator1 + month + seperator1 + strDate;
                        // console.log(currentdate);
                        // console.log55555

                        //获取任务时限的val值 计算出任务与时限相差几天
                        var disparity = ((new Date(taskTime)/1000) - (new Date(currentdate)/1000))/(60*60*24);
                        $("#DBdate_picker_jy").val(disparity);
                    }
                });
            });
            $(document).on("click","#date_picker",function () {
                laydate({
                    elem: this,
                    format: 'YYYY-MM-DD',
                    // min: minDate(),
                    choose: function(data){
                        //将值赋值给input框
                        console.log(data)
                        var $checked = $("input[name='period']:checked").val();
                        data = data.substring(data.length-2,data.length)
                        $("#date_picker").val(data);
                    }
                });
            });


            $(document).on("click",".dalong",function () {
                var _this = this;
                laydate({
                    // elem: ".dalong",
                    elem: this,
                    format: 'YYYY-MM-DD',
                    // min: minDate(),
                    choose: function(data){
                        //将值赋值给input框
                        console.log(data)
                        var $checked = $("input[name='period']:checked").val();
                        data = data.substring(data.length-2,data.length)
                        $(_this).val(data);
                    }
                });
            });
            // var Zdate_pickers = document.querySelectorAll(".Zdate_picker")
            // for(let i=0;i<Zdate_pickers.length;i++){
            //     Zdate_pickers[i].onclick = function(data){
            //         console.log(data)
            //         console.log(Zdate_pickers[i])
            //     }
            // }
            $(document).on("click","#DBdate_picker",function () {
                laydate({
                    elem: "#DBdate_picker",
                    format: 'YYYY-MM-DD',
                    // min: minDate(),
                    choose: function(data){
                        //将值赋值给input框
                        var $checked = $("input[name='period2']:checked").val();
                        data = data.substring(data.length-2)
                        $("#DBdate_picker").val(data);
                    }
                });
            });
        });
        $(document).on("click",".removeTimeBtn",function () {
            $(this).parent().parent().remove();
        });
    </script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#e1").select2({
            placeholder: "请输入或点击选择督察组",
            width: "100%",
            closeOnSelect: false,
            allowClear: true,
        });
    });
    function addHandle(data) {
        $(data).siblings("input").val($(data).val().join(","));
    }

    function handleAdd() {
        failure(".handleAdd",1)
        var inspectionId = $("input[name='inspectionId']").val()
        var content = $("textarea[name='content']").val()
        var mainName = $("input[name='mainName']").val()
        var file = $("input[name=file]").val()
        var gJFileName = $("input[name=fileName]").val()
        console.log(inspectionId,content,mainName)

        var value = []
        var DBvalue = []
        $(".danyan").each(function() {
            value.push($(this).val());
        });
        value = value.join(",");
        $("input[name='timeLimits2']").val(value);

        var   timeLimit2 =  $("input[name='timeLimit2']").val()
        var   timeType2 =  $("input[name='timeType2']").val()
        var   period2 =  $("input[name='period2']").val()
        var   day2 =  $("input[name='day2']").val()
        var   week2 =  $("select[name='week2']").val()
        var   month2 =  $("input[name='month2']").val()
        var   quarter2 =  $("input[name='quarter2']").val()
        var   timeLimits2 =  $("input[name='timeLimits2']").val()
        console.log(timeLimit2)
        console.log(timeType2)
        console.log(period2)
        console.log(day2)
        console.log(week2)
        console.log(month2)
        console.log(quarter2)
        console.log(timeLimits2)

        $.post("/taskCrucial/create",{
            "mainName":mainName,
            "content":content,
            "inspectionId":inspectionId,
            "gJFile":file,
            "gJFileName":gJFileName,
            "timeLimit2":timeLimit2,
            "timeType2":timeType2,
            "period2":period2,
            "day2":day2,
            "week2":week2,
            "month2":month2,
            "quarter2":quarter2,
            "timeLimits2":timeLimits2
        },function (res) {
            if(res){
                if(res.code == '200'){
                    alert('添加成功')
                    setTimeout(function () {
                        parent.close_current_app();
                    },50)
                } else {
                    alert('添加失败')
                }
                failure(".handleAdd",0)
            }
        })
    }
    function rightTipBOX(msg) {
        if(msg == undefined){
            msg = ''
        }
        $.gritter.add({
            title: "提示",
            text: msg
        });
    }
</script>
</body>
</html>
